<template>
  <div class="infoPopContainer">
    <!-- <div class="arrow"></div> -->
    <div class="infoPopTitle">
      <div class="title-left">
        <div class="bar"></div>
        <div class="title-text"><span></span>{{ dataName }}<span></span></div>
      </div>
      <div class="title-right">
        <!-- <div  tabindex="0" class="icon">-</div> -->
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div class="infoPopContent">
      <div
        style="width: 460px; height: 300px; margin-top: 10px"
        v-if="userDeviceShow"
      >
        <el-table :data="deviceInfoList" style="width: 69%; height: 97%" stripe>
          <el-table-column
            prop="label"
            label="属性"
            width="150"
          ></el-table-column>
          <el-table-column prop="value" label="值"></el-table-column>
        </el-table>
      </div>
      <div style="width: 460px; height: 300px; margin-top: 10px" v-else>
        <el-table :data="resultInfoList" style="width: 69%; height: 97%" stripe>
          <el-table-column
            prop="label"
            label="属性"
            width="150"
          ></el-table-column>
          <el-table-column prop="value" label="值"></el-table-column>
        </el-table>
      </div>
      <el-button @click="userDeviceAttach" v-if="userDeviceShow"
        >用户设备挂接</el-button
      >
      <el-button @click="showMoreInfo" v-else>更多信息...</el-button>
    </div>
  </div>
</template>

<script>
// import vavleManageForm from './components/valveManageForm.vue';
import UserEquipConnection from "../EquipmentManagement/components/UserEquipConnection.vue";
export default {
  name: "InfoPop",
  components: {
    UserEquipConnection,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      map: null,

      querySpatialLayer: null,
      isMoreInfoShow: false,
      detailDataContent: {},
      dataName: "",
      resultInfoList: [
        { label: "关键字", value: "" },
        { label: "工程编号", value: "" },
        { label: "本点号", value: "" },
        { label: "口径", value: "" },
        { label: "所在道路", value: "" },
      ],
      deviceInfoList: [
        { label: "设备编号", value: "" },
        { label: "所在道路", value: "" },
        { label: "所属公司", value: "" },
        { label: "用户设备", value: "" },
      ],
    };
  },
  mounted() {
    setTimeout(() => {
      this.map = this.$store.getters.Map;
      this.querySpatialLayer =
        this.map.layer.createVectorLayer("popup点图层");
    }, 1000);
  },
  beforeDestroy() {
    if (this.map) {
      // this.querySpatialLayer.getSource().clear();
      this.clear();
    }
  },

  computed: {
    detailDataPopList() {
      return this.$store.state.detailDataPopList;
    },
    isInfoPopShow() {
      // 返回 prop 的值
      return this.dialogVisible;
    },
    resultInfo() {
      // 假设这是一个从API获取的数据对象
      return {
        occurrenceToEndDate: "2024-11-22",
        riskLevel: "高风险",
        warningSystem: "警告系统A",
        impactArea: "区域1",
        analysisConclusion: "高压",
      };
    },
    userDeviceShow() {
      return this.$store.state.isUserDeviceShow;
    },
  },
  created() {},
  methods: {
    userDeviceAttach() {
      this.$store.commit("setIsUserDeviceSonShow", true);
    },
    clear(){
      this.map.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (layer.get("layerName") == 'popup点图层'||layer.get("name")== 'popup点图层') {
            // console.log("找到popup点图层",layer)
            layer.getSource().clear();
          }
        });
    },
    closeDialog() {
      // console.log('this.queryspatialLayer',this.querySpatialLayer);
      this.clear();
      // this.querySpatialLayer.getSource().clear();
      // this.map.layer.removeLayer(this.querySpatialLayer);
      // 通过修改 prop 来关闭弹窗
      this.$emit("update:dialogVisible", false);
    },
    showMoreInfo() {
      // this.isMoreInfoShow = !this.isMoreInfoShow;
      this.$store.commit("setIsUserEquipShow", true);
    },
  },
  watch: {
    detailDataPopList(newVal) {
      // console.log("弹窗出现1111111111");
      let trueCoordiante = [];
      this.clear();
      // this.querySpatialLayer.getSource().clear();
      newVal.rec.forEach((item) => {
        this.detailDataContent[item.fldname] = item.fldval;
      });
     console.log("弹窗出现1111的表格值",this.detailDataContent)
        //管线
        if(this.detailDataContent.typeOFdata=="pipeline"||newVal.strCor){
          if(newVal.strCor)
          (trueCoordiante = newVal.strCor.split(";")[1].split(" "));
        this.dataName =
          (this.detailDataContent.pipe_dia ||
            this.detailDataContent.diameter) +
          "mm" +
          "管线";
      } else {
        //设备点
        this.detailDataContent.typeOfDevice = "device";
        if (newVal.strPnt) {
          trueCoordiante = newVal.strPnt.split(" ");
        }

        this.dataName =
          this.detailDataContent.node_prop  ||
          this.detailDataContent.nodeProperty 
      }
      console.log("弹窗出现222的表格值",this.detailDataContent,this.dataName)
      console.log("弹窗出现333的表格值",this.dataName)
      // console.log(
      //   newVal,
      //   trueCoordiante,
      //   this.detailDataContent,
      //   " this.detailDataContent"
      // );

      if (this.userDeviceShow) {
        this.deviceInfoList.forEach((list) => {
          if (list.label == "所在道路") {
            list.value =
              this.detailDataContent.rd_name || this.detailDataContent.road_nm;
          } else if (list.label == "所属公司") {
            list.value =
              this.detailDataContent.COMPNAME ||
              this.detailDataContent.compname;
          } else if (list.label == "工程编号") {
            list.value =
              this.detailDataContent.proj_num ||
              this.detailDataContent.projectNumber;
          } else if (list.label == "管网区块") {
            list.value = this.detailDataContent.COMPNAME;
          }
        });
      } else {
        this.resultInfoList.forEach((list) => {
          if (list.label == "关键字") {
            list.value = this.detailDataContent.keywords;
          } else if (list.label == "工程编号") {
            list.value =
              this.detailDataContent.proj_num ||
              this.detailDataContent.projectNumber;
          } else if (list.label == "本点号") {
            list.value =
              this.detailDataContent.pt_num ||
              this.detailDataContent.point_num ;
          } else if (list.label == "口径") {
            list.value =
              this.detailDataContent.pipe_dia ||
              this.detailDataContent.diameter;
          } else if (list.label == "所在道路") {
            list.value =
            this.detailDataContent.rd_name || this.detailDataContent.road_nm;
          }
        });
      }
      let pointForMarkerX =
        this.detailDataContent.xcoordinate ||
        trueCoordiante[0] ||
        this.detailDataContent.x_coord;
      let pointForMarkerY =
        this.detailDataContent.ycoordinate ||
        trueCoordiante[1] ||
        this.detailDataContent.y_coord;
      console.log(pointForMarkerX, pointForMarkerY);

      this.map.marker.addMarker(
        pointForMarkerX,
        pointForMarkerY,
        this.querySpatialLayer,
        {
          scale: 1.5, //大小
          radius: 8,
          pBorderColor: "#000000",
          pBorderWidth: 1,
          pFillColor: "green",
        },
        this.detailDataContent
      );
    },
    
    // isInfoPopShow(val) {
    //   ;
    // },
  },
};
</script>

<style lang="scss" scoped>
.infoPopContainer {
  pointer-events: auto;
  width: 14vw;
  color: white;
  height: 17vh;
  z-index: 99999;
  position: relative;
  left: 10rem;
  top: 10rem;
  // .arrow {
  //   width: 3rem;
  //   height: 3rem;
  //   position: absolute;
  //   left: -3rem;
  //   background: #fff;
  // }
  .infoPopTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;
    .title-left,
    .title-right {
      display: flex;
      align-items: center;
    }
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin-right: 10px; /* 小竖条和文字之间的间距 */
    }
    .icon {
      width: 20px; /* 小方框的宽度 */
      height: 20px; /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px; /* 小方框之间的间距 */
    }
    .icon:hover {
      color: #4998f2;
    }
    .icon:focus {
      color: #4998f2;
    }
  }
  .infoPopContent {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #285383;
    font-size: 0.8rem;
    ::v-deep .el-table {
      overflow: auto;
    }
  }
}
</style>
